/* pages/workbench/workbench.wxss */
// @import '../../style/pubLayout.wxss';

.g-container {

  >.g-header {

    >.btn_edit {
      position: absolute;
      top: 50%;
      right: 22rpx;
      transform: translateY(-50%);
      // width: 44rpx;
      width: 56rpx;
    }

    >.btn_save {
      position: absolute;
      top: 50%;
      right: 30rpx;
      transform: translateY(-50%);
      width: 96rpx;
      height: 48rpx;
      border-radius: 8rpx;
      font-size: 24rpx;
      // line-height: 0;
      color: #0251FF;
      background: #fff;
    }
  }

  // >.g-main {
  //   position: relative;
  //   overflow-y: auto;
  //   color: #101010;

  //   >.tip_wrap {
  //     position: absolute;
  //     top: 170rpx;
  //     transition: all 0.2s;
  //     width: 100%;
  //     font-size: 26rpx;
  //     text-align: center;
  //     color: #808080;
  //     opacity: 0;
  //   }

  //   >.nav_wrap {
  //     // height: 144rpx;
  //     color: #000;
  //     background: #fff;

  //     >.col_4 {
  //       height: 144rpx;
  //     }
  //   }

  //   >.menu_wrap {
  //     margin: 36rpx 28rpx 0;
  //     padding-bottom: 36rpx;
  //     border-radius: 20rpx;
  //     font-size: 24rpx;
  //     background: #fff;
  //     opacity: 1;

  //     &.transparent {
  //       opacity: 0;
  //     }

  //     &:nth-child(3) {
  //       transition: all 0.13s;
  //     }

  //     >.menu_title {
  //       padding: 36rpx 32rpx 20rpx;
  //       font-size: 32rpx;
  //       font-weight: bold;
  //     }

  //     >.flex_wrap {
  //       .col_4 {
  //         height: 130rpx;
  //       }
  //       .col_5 {
  //         height: 170rpx;
  //       }


  //       >.ani {
  //         transition: opacity 0.25s,
  //                     top 0.25s,
  //                     left 0.25s;
  //       }

  //       .transparent {
  //         opacity: 0;
  //       }

  //       >.move_wrap {
  //         // position: absolute;
  //         // top: 0;
  //         // left: 0;
  //         width: 100%;

  //         .col_5 {
  //           box-sizing: border-box;
  //           border-radius: 8rpx;
  //           opacity: 0;

  //           &.ani {
  //             transition: all 0.15s;
  //           }

  //           &.drag {
  //             z-index: 1;
  //             border: 2rpx dashed #e6e6e6;
  //             background: rgba(255, 255, 255, 0.9);
  //             opacity: 1;
  //           }
  //         }
  //       }
  //     }
  //   }

  //   .flex_wrap {
  //     position: relative;
  //     // display: flex;
  //     // flex-wrap: wrap;

  //     .col_4, .col_5 {
  //       position: relative;
  //       // display: flex;
  //       display: inline-flex;
  //       flex-direction: column;
  //       justify-content: center;
  //       align-items: center;
  //       box-sizing: border-box;
  //       border: 2rpx dashed transparent;
  //       padding: 0 12rpx;

  //       >.icon {
  //         // width: 56rpx;
  //         width: 0;
  //         height: 56rpx;
  //         margin-bottom: 2rpx;
  //       }

  //       >.text {
  //         height: 32rpx;
  //         text-align: center;
  //       }

  //       >.btn_opr {
  //         position: absolute;
  //         top: 0;
  //         right: 0;
  //         display: none;
  //         font-size: 32rpx;
  //       }

  //       >.btn_add {
  //         transform: translate(-75%, 0);
  //         color: #0251FF;
  //       }
  //       >.btn_reduce {
  //         // transform: translate(-25%, 25%);
  //         transform: translate(-25%, 0);
  //         color: #ccc;
  //       }
  //     }

  //     .col_4 {
  //       width: 25%;
  //     }

  //     .col_5 {
  //       width: 20%;
  //       padding: 0 !important;
  //     }
  //   }

  //   &.edit_wrap {
  //     >.tip_wrap {
  //       opacity: 1;
  //     }

  //     >.menu_wrap:nth-child(3) {
  //       margin: 80rpx 28rpx 0;
  //     }


  //     .btn_opr {
  //       display: block !important;
  //     }
  //   }
  // }

  >.g-main {
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    >.main_wrap {
      flex: 1;
      position: relative;
      color: #101010;

      >.tip_wrap {
        position: absolute;
        top: 170rpx;
        transition: all 0.2s;
        width: 100%;
        font-size: 26rpx;
        text-align: center;
        color: #808080;
        opacity: 0;
      }

      >.nav_wrap {
        // height: 144rpx;
        color: #000;
        background: #fff;

        >.col_4 {
          height: 144rpx;
        }
        &.flex_wrap{
          > .col_4{
            width: 25%;
          }
        }
      }

      >.menu_wrap {
        margin: 36rpx 28rpx 0;
        padding-bottom: 36rpx;
        border-radius: 20rpx;
        font-size: 24rpx;
        background: #fff;
        opacity: 1;

        &.transparent {
          opacity: 0;
        }

        &:nth-child(3) {
          transition: all 0.13s;
        }

        >.menu_title {
          display: flex;
          justify-content: space-between;
          padding: 36rpx 32rpx 20rpx;
          > text{
            font-size: 32rpx;
            font-weight: bold;
          }
          > .icon-arrow{
            font-size: 40rpx;
            -webkit-transition: transform .6s;
            -moz-transition: transform .6s;
            -ms-transition: transform .6s;
            -o-transition: transform .6s;
            transition: transform .6s;
            &.down{
              transform: rotateZ(180deg);
            }
          }
        }

        >.flex_wrap {
          .col_4 {
            height: 200rpx;
            font-size: 32rpx;
          }
          .col_5 {
            height: 170rpx;
            font-size: 32rpx;
          }


          >.ani {
            transition: opacity 0.25s,
                        top 0.25s,
                        left 0.25s;
          }

          .transparent {
            opacity: 0;
          }

          >.move_wrap {
            // position: absolute;
            // top: 0;
            // left: 0;
            width: 100%;

            .col_5 {
              box-sizing: border-box;
              border-radius: 8rpx;
              opacity: 0;

              &.ani {
                transition: all 0.15s;
              }

              &.drag {
                z-index: 1;
                border: 2rpx dashed #e6e6e6;
                background: rgba(255, 255, 255, 0.9);
                opacity: 1;
              }
            }
          }
        }
      }

      .flex_wrap {
        position: relative;
        // display: flex;
        // flex-wrap: wrap;

        .col_4, .col_5 {
          position: relative;
          // display: flex;
          display: inline-flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          border: 2rpx dashed transparent;
          padding: 0 12rpx;

          >.icon {
            // width: 56rpx;
            width: 0;
            height: 66rpx;
            margin-bottom: 2rpx;

          }

          >.text {
            height: 32rpx;
            text-align: center;
          }

          >.btn_opr {
            position: absolute;
            top: 0;
            right: -18rpx;
            display: none;
            font-size: 32rpx;
            & > i{
              font-size: 32rpx;

            }
          }

          >.btn_add {
            transform: translate(-75%, 0);
            color: #0251FF;

          }
          >.btn_reduce {
            // transform: translate(-25%, 25%);
            transform: translate(-25%, 0);
            color: #ccc;
          }
        }

        .col_4 {
          width: 32%;
        }

        .col_5 {
          width: 32%;
          padding: 0 !important;
        }
      }
    }

    &.edit_wrap {
      >.main_wrap {
        >.tip_wrap {
          opacity: 1;
        }

        >.menu_wrap:nth-child(3) {
          margin: 80rpx 28rpx 0;
        }


        .btn_opr {
          display: block !important;
        }
      }
    }
  }

  .hide {
    display: none;
  }
}
